<template>
	<view class="main">
		<u-navbar :isBack="false" :border-bottom="false" :background="background">
			<view @click="skip">
				<u-icon name="nav-back" color="#fff" size="44"></u-icon>
			</view>
		</u-navbar>
		<image :src="STATIC_URL + 'dlbj.png'" mode="aspectFill" class="bg"></image>
		<view class="user-info" v-if="Object.keys(userInfo).length != 0" @click.stop="editInfo">
			<view class="info">
				<u-avatar :src="userInfo.headavatar" size="110"></u-avatar>
				<view class="account">
					<text class="name">{{userInfo.name}}</text>
					<view class="flex-center">
						<view class="vip" v-if="">{{isVip ? 'SVIP' : '普通会员'}}</view>
						<!-- <view class="vip" v-if="userInfo.dis_text">{{userInfo.dis_text}}</view> -->
						<view class="vip" v-if="userInfo.vip_level_text">{{userInfo.vip_level_text}}</view>
						<!-- <view class="vip" v-if="userInfo.agent_text">{{userInfo.agent_text}}</view> -->
						<view class="vip" v-for="(item, index) in userInfo.tags">{{item}}</view>
						<view :class="{'message': true, 'dot': userInfo.state == 1}" @click.stop="notice">
							<u-icon name="chat"></u-icon>
						</view>
					</view>
				</view>
			</view> 
			<view class="qr-code" @click.stop="openCode">
				<image src="https://shop.outletds.com/img/-erweima-2.png" mode="aspectFit"/>
				会员码
			</view>
			</image>
			<u-icon name="arrow-right" color="#FFF"></u-icon>
		</view>
		<view class="user-info" v-else @click="openAuth">
			<view class="info">
				<u-avatar src="" size="110"></u-avatar>
				<view class="account">
					<text class="name">立即登录</text>
				</view>
			</view>
			<u-icon name="arrow-right" color="#FFF"></u-icon>
		</view>
		<block v-if="Object.keys(userInfo).length != 0">
			<view class="box">
				<view class="header">
					<text class="title">我的资产</text>
				</view>
				<view class="moneys">
					<view class="item" @click="wallet">
						<view class="left">
							<text>余额</text>
							<view class="info">
								<text class="num" v-if="showBalance">{{ userInfo.money || 0 }}</text>
								<text class="num" v-else>****.**</text>
								<text class="unit">元</text>
							</view>
						</view>
						<image :src="`${STATIC_URL2}yue.png`" mode="aspectFit"></image>
					</view>
					<view class="divider"></view>
					<view class="item" @click="integral">
						<view class="left">
							<text>积分</text>
							<view class="info">
								<text class="num">{{userInfo.gold_num || 0}}</text>
								<text class="unit">分</text>
							</view>
						</view>
						<image :src="`${STATIC_URL2}jifen.png`" mode="aspectFit"></image>
					</view>
				</view>
				<view class="moneys no-border">
					<view class="item" @click="openPage('/pages/wallet/wallet?type=1')">
						<text>收益余额</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="divider"></view>
					<view class="item" @click="openPage('/pages/mine/coupon/coupon')">
						<text>我的卡券</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<vip-card></vip-card>
			<view class="box">
				<view class="header">
					<view class="title">
						我的订单
					</view>
					<view class="more" @click="ordersNavigate(0)">
						查看全部订单
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="orders">
					<view class="item" v-for="(item, index) in orderList" :key="index"
						@click="ordersNavigate(index + 1)">
						<image :src="item.icon" mode="aspectFit"></image>
						<text>{{item.name}}</text>
						<view class="num" v-if="item.num">{{item.num}}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="header">
					<view class="title" style="color: #000;">我的服务</view>
				</view>
				<view class="service">
					<view class="item" v-if="!item.hide" v-for="(item, index) in service" :key="index" @click="openPage(item.path)">
						<view class="left">
							<image :src="item.icon" mode="aspectFit"></image>
							<text class="title">{{item.name}}</text>
						</view>
						<view class="right">
							<text class="remark">{{item.remark}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="userInfo.store_account_type !== 0">
				<view class="store">
					<view class="item" @click="openStore(1)" v-if="userInfo.store_account_type === 1">
						<view class="left">
							<!-- <image :src="item.icon" mode="aspectFit"></image> -->
							<text class="title">店员登录</text>
						</view>
						<view class="right">
							<!-- <text class="remark">{{item.remark}}</text> -->
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="item" @click="openStore(2)" v-if="userInfo.store_account_type === 2">
						<view class="left">
							<!-- <image :src="item.icon" mode="aspectFit"></image> -->
							<text class="title">审核员登录</text>
						</view>
						<view class="right">
							<!-- <text class="remark">{{item.remark}}</text> -->
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>

			</view>
		</block>
		<!-- 获取用户手机号 -->
		<u-popup v-model="phoneShow" mode="bottom" height="200" class="mine-phone">
			<view class="tips">同意平台获取手机号已获得更好的体验</view>
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="phoneNumber">
				确定
			</button>
		</u-popup>
		<codePopup :value.sync="showCode" :src="userInfo.qr_code">
			<view slot="bottom" class="refresh" @click="refreshInfo">
				<u-icon name="clock"></u-icon>
				<text>更新会员码(每60秒自动更新)</text>
			</view>
		</codePopup>
		<pageCont />
	</view>
</template>

<script>
	import {
		login,
		userInfo,
		shareLevel,
		phone,
		showBalanceApi
	} from "@/utils/api";
	import {
		mapActions,
		mapGetters
	} from "vuex";
	import vipCard from "@/components/vipCard.vue"
	import codePopup from "@/components/code-popup.vue"
	import pageCont from '@/components/pageContainer.vue'
	export default {
		data() {
			return {
				isLogin: false,
				phoneShow: false, // 获取用户手机号
				staticsList: [{
						title: "总销售额",
						icon: "xse",
						url: "/pages/mine/subs/statistics/statistics?type=0",
						value: " ",
						// value: "56847238",
						rightBorder: true,
					},
					{
						title: "总收益",
						icon: "sy",
						url: "/pages/mine/subs/statistics/statistics?type=1",
						// value: "8365178",
						value: " ",
						rightBorder: false,
					},
					{
						title: "总团队",
						icon: "td",
						url: "/pages/common/team/team",
						// url: "",
						// value: "18669",
						value: " ",
						rightBorder: true,
					},
					{
						title: "估值",
						icon: "gz",
						url: "",
						value: " ",
						// value: "258908385",
						rightBorder: false,
					},
				],
				orderList: [{
						icon: "https://xyshop.outletds.com/img/daifukuan.png",
						name: "待付款",
						num: 0,
						key: 'status0',
						type: 1
					},
					{
						icon: "https://xyshop.outletds.com/img/daifahuo.png",
						name: "待发货",
						num: 0,
						key: 'status1',
						type: 1
					},
					{
						icon: "https://xyshop.outletds.com/img/daishouhuo.png",
						name: "待收货",
						num: 0,
						key: 'status2',
						type: 1
					},
					{
						icon: "https://xyshop.outletds.com/img/yiwancheng.png",
						name: "已完成",
						num: 0,
						key: 'status3',
						type: 1
					},
					{
						icon: "https://xyshop.outletds.com/img/shouhou.png",
						name: "售后",
						num: 0,
						key: 'status4',
						type: 1
					},
				],
				background: {
					backgroundColor: 'transparent',
				},
				service: [{
						icon: "https://xyshop.outletds.com/img/quanyi.png",
						name: "会员权益",
						remark: "查看会员权益",
						path: "/pages/tabs/memberIntro/memberIntro"
					},
					{
						icon: "https://xyshop.outletds.com/img/wodepengyou.png",
						name: "我的朋友",
						remark: "查看团队成员",
						path: "/pages/common/team/team"
					},
					// {
					// 	icon: "https://xyshop.outletds.com/img/paiming.png",
					// 	name: "业绩排名",
					// 	remark: "当月销售排名",
					// 	path: "/pages/rank/rank"
					// },
					{
						icon: "https://xyshop.outletds.com/img/jifen.png",
						name: "消费返现",//积分赠送
						remark: "消费排队返现",//赠送下级积分
						path: "/pages/me/welfare?type=1",///pages/common/provideGold/provideGold
					},
					{
						icon: "https://xyshop.outletds.com/img/poster.png",
						name: "推广海报",
						remark: "推广宣传海报",
						path: "/pages/mine/poster/poster"
					},
					{
						icon: "https://xyshop.outletds.com/img/shouhuodizhi.png",
						name: "收货地址",
						remark: "填写收货地址",
						path: "/pages/common/address/address"
					},
					{
						icon: "https://xyshop.outletds.com/img/apply-1.png",
						name: "分销商",
						remark: "申请成为分销商",
						path: "/pages/mine/cooperationApply/cooperationApply?type=1",
						hide: true
					},
					{
						icon: "https://xyshop.outletds.com/img/apply-2.png",
						name: "代理商",
						remark: "申请成为代理商",
						path: "/pages/mine/cooperationApply/cooperationApply?type=2",
						hide:true
					},
				],
				loginCode: "",
				showBalance: false,
				showCode: false,
			};
		},
		components: {
			vipCard,
			codePopup,
			pageCont
		},
		watch:{
			userInfo(val){
				this.service.forEach(item=>{
					if(item.name === '分销商' && val.dis_apply == 1){
						item.hide = false
					}
					if(item.name === '代理商' && val.agent_apply == 1){
						item.hide = false
					}
				})
			}
		},
		computed: {
			...mapGetters(["userInfo", "shareId", 'isVip']),
			IDtext() {
				if (this.userInfo) {
					let code = this.userInfo.vip_level
					let str = ""
					switch (code) {
						case 0:
							str = "普通会员";
							break;
						case 1:
							str = "SVIP会员";
							break;
						case 2:
							str = "合伙人";
							break;
						case 3:
							str = "城市合伙人";
							break;
						case 4:
							str = "平台合伙人";
							break;
					}
					return str
				} else {
					return null
				}
				if (this.userInfo.distribution) {
					return "平台创始人";
				} else if (this.userInfo.share_ids) {
					return "城市股东";
				} else if (this.userInfo.landlord) {
					return "城市店主";
				} else if (this.userInfo.vip) {
					return "VIP会员";
				} else {
					return "";
				}
			},
		},
		onLoad() {
			uni.login({
				success: (res) => {
					this.loginCode = res.code
				}
			})
		},
		onShow() {
			if (uni.getStorageSync("token")) {
				this.isLogin = true;
				this.setUserInfo().then(() => {
					// this.setOrderAddress(this.userInfo.city);
					for (let i = 0; i < this.orderList.length; i++) {
						this.orderList[i].num = this.userInfo.array["status" + i];
					}
					console.log(this.orderList);
				});
				this.isShowBalance()
			}
		},

		methods: {
			...mapActions([
				"setUserInfo",
				"setAttr",
				"setOrderAddress",
				"clearUserInfo",
			]),
			skip() {
				uni.redirectTo({
					url: '/pages/index/index?index=2'
				})
			},
			async refreshInfo() {
				await this.setUserInfo()
				this.$utils.success('更新成功')
			},
			openPage(path) {
				console.log(path);
				if (!path) {
					uni.showToast({
						icon: "none",
						title: "功能暂未开放"
					})
					return
				}
				if(path.match(/tabs/)){
					this.$Router.pushTab(path)
				}else{
					this.$Router.push(path)
				}
			},
			integral() {
				uni.navigateTo({
					url: "/pages/wallet/integral/integral"
				})
			},
			isShowBalance() {
				showBalanceApi().then(res => {
					console.log(res);
					if (res.code == 200) {
						this.showBalance = res.data.value == 1
					}
				})
			},
			openStore(type) {
				this.$Router.push(`/pages/store/login/login?type=${type}`)
			},
			openAuth() {
				this.$Router.push('/pages/login/index')
			},
			openCode() {
				console.log('into');
				this.showCode = true
			},
			beforeOper(callback) {
				if (uni.getStorageSync("token")) {
					callback();
				} else {
					uni.showToast({
						title: "请先登录",
						icon: "none",
					});
				}
			},
			//编辑用户信息
			editInfo() {
				if(!uni.getStorageSync('token')) return uni.navigateTo({
						url: "/pages/login/index",
					});
				this.beforeOper(() => {
					uni.navigateTo({
						url: "/pages/common/editInfo/editInfo",
					});
				});
			},
			// 消息通知
			notice() {
				this.beforeOper(() => {
					uni.navigateTo({
						url: "/pages/common/notice/notice",
						success: () => {
							this.setAttr({
								key: "status",
								value: 2,
							});
						},
					});
				});
			},
			//钱包
			wallet() {
				this.beforeOper(() => {
					uni.navigateTo({
						url: "/pages/wallet/wallet",
					});
				});
			},
			// 查看更多的订单
			ordersNavigate(status) {
				this.beforeOper(() => {
					uni.navigateTo({
						url: "/pages/orders/orders?status=" + status,
					});
				});
			},
			// 操作的页面跳转
			pageNavigate(url) {
				this.beforeOper(() => {
					if (url) {
						uni.navigateTo({
							url,
							fail: (error) => {
								console.log(error);
							},
						});
					} else {
						uni.showToast({
							icon: "none",
							title: "当前功能未开放！",
						});
					}
				});
			},
			// 退出登录
			logout() {
				uni.showLoading();
				uni.removeStorageSync("token");
				this.clearUserInfo().then(() => {
					// 清除订单数
					this.orderList.map((item) => {
						item.count = 0;
					});

					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: "已成功退出",
						success: () => {
							this.isLogin = false;
						},
					});
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.main {
		@extend .base-main;
		background-color: #EEEFF1;
		min-height: 100vh;
		font-size: 28rpx;
	}

	.arrow {
		color: #FFF;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 415rpx;
	}

	.user-info {
		@extend .flex-btw;
		margin-bottom: 40rpx;
		position: relative;

		.info {
			display: flex;
			color: #FFF;

			.account {
				margin-left: 20rpx;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;

				.name {
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}

				.vip {
					font-size: 22rpx;
					padding: 5rpx 15rpx;
					background-color: #FFF;
					color: $uni-color-primary;
					border-radius: 30rpx;
					margin-right: 20rpx;
					margin-left: -10rpx;
				}

				.message {
					position: relative;
					font-size: 30rpx;
				}

				.dot::before {
					content: "";
					width: 7rpx;
					height: 7rpx;
					border: 2rpx solid #FFF;
					position: absolute;
					right: 0;
					top: 5rpx;
					background-color: red;
					border-radius: 50%;
					z-index: 999;
				}
			}
		}
	}

	.box {
		padding: 30rpx 20rpx;

		.header {
			@extend .flex-btw;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;

			.more {
				color: $uni-text-color-grey;
			}

			.title {
				color: #CB712B;
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		.store {
			.item {
				@extend .flex-btw;

				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #EEE;

				&:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border: none
				}
			}
		}

		.moneys {
			@extend .flex-btw;
			border-bottom: 1px solid #EEE;
			border-top: 1px solid #EEE;
			padding: 20rpx 0;

			&.no-border {
				border: none;
				padding-bottom: 0;
				color: #5f5f5f;
			}

			.divider {
				height: 70rpx;
				width: 2rpx;
				background-color: #EEE;
				margin: 0 20rpx;
			}

			.item {
				flex: 1;
				@extend .flex-btw;

				.info {
					font-size: 22rpx;
					color: $uni-text-color-grey;

					.num {
						font-size: 36rpx;
						color: $uni-color-primary;
						margin-right: 5rpx;
					}
				}

				image {
					width: 70rpx;
					height: 70rpx;
				}

			}
		}

		.orders {
			@extend .flex-btw;
			border-top: 1px solid #EEE;
			padding-top: 20rpx;

			.item {
				@extend .flex-center;
				flex-direction: column;
				position: relative;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 10rpx;
				}
				.num{
					position: absolute;
					top: 0;
					right: 0;
					background-color: red;
					width: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					border-radius: 50rpx;
					@extend .flex-center;
					color: #FFF;
				}
			}
		}

		.service {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;

			.item {
				@extend .flex-btw;
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1px solid #EEE;

				.left {
					@extend .flex-center;
					font-size: 30rpx;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-right: 10rpx;
					}
				}

				.right {
					color: $uni-text-color-grey;
					@extend .flex-center;
				}

				&:last-child {
					padding-bottom: 0;
					border: none;
				}
			}
		}
	}

	.qr-code {
		@extend .flex-center;
		font-size: 24rpx;
		color: #FFF;
		background-color: #7A2600;
		border-radius: 50rpx;
		padding: 11rpx 17rpx;
		position: absolute;
		right: 50rpx;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 7rpx;
		}
	}

	.refresh {
		@extend .flex-center;
		margin-bottom: 62rpx;
		color: $primary-color;
		font-size: 24rpx;
	}
</style>
